import React from 'react'
import { Form, Input, Select, DatePicker, message, Row, Col } from "antd"
import { useSelector, useDispatch } from "umi"
import attendanceLists from "@/staticLists/addendanceList";
import { attendanceRule } from "@/utils/rules";
import { createOption } from "@/utils/selectOption";
import { mapData } from "@/utils/mapData";
import $http from "@/services";
import moment from 'moment';
export default function index({ _initSalaryList }) {
    const [form] = Form.useForm();
    const { attendanceDetail } = useSelector(state => state.attendanceInfo);
    const dispatch = useDispatch();
    // 修改之后经过的函数
    const checkForm = async (item) => {
        const value = form.getFieldValue(item.itemName);
        const { data, msg, code } = await $http.updateAttendance({
            _id: attendanceDetail._id,
            type: item.itemName,
            updateVal: value
        });
        // 判断是否成功
        if (!code) {
            message.success(msg);
            _initSalaryList();
            dispatch({
                type: "attendanceInfo/getDetailAttendance",
                payload: attendanceDetail._id
            })
        }
    }

    // 节点的创建
    const AttendanceNode = {
        popover(item) {
            return <Input readOnly className="border-color"></Input>
        },
        date(item) {
            return <DatePicker style={{ width: "100%" }} onChange={() => checkForm(item)}></DatePicker>
        },
        select(item) {
            return <Select options={createOption(mapData[item.itemName])} onChange={() => checkForm(item)}></Select>

        }
    }


    return (
        <Form layout='vertical' form={form} initialValues={{
            ...attendanceDetail,
            staffNameVal: attendanceDetail.staffName.userName,
            createTime: moment(attendanceDetail.createTime)
        }}>
            {attendanceLists.map((el, index) => {
                return (<Row justify={'space-between'} key={index}>
                    {el.map((item, childIndex) => {
                        return <Col span="11" key={childIndex}>
                            <Form.Item name={item.itemName} label={item.labelTxt} rules={attendanceRule[item.itemName]}>
                                {AttendanceNode[item.renderType](item)}
                            </Form.Item>
                        </Col>
                    })}
                </Row>)
            })}
        </Form>
    )
}
